import React, {useEffect, useState} from "react";
import {Card, Table, Space, Button, Dropdown} from "antd";

import {ProjectApi} from '@/api/index'
import "./list.less"

export default ()=> {

    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    const [pageSize, setPageSize] = useState(20)
    const [page, setPage] = useState(0)

    useEffect(() => {
        getProjectList()
    },[page,pageSize])

    const getProjectList = async () => {
        let params = {
            page: page,
            pageSize: pageSize,
        }
        let ret = await ProjectApi.list(params);
        if (ret && ret.code === 200) {

            setList(ret.data.content || [])
            setTotal(ret.data.totalElements)
        }
    }

    const items = [
        {
            key: '1',
            label: '安装',
        },
        {
            key: '2',
            label: '卸载',
        },
        {
            key: '3',
            label: '升级',
        },
    ];

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '命名空间',
            dataIndex: 'namespace',
            key: 'namespace',
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 150,
            key: 'action',
            render: (text, record) => (
                <Space size="small">
                    <Button type="link" size="small">启动</Button>
                    <Button type="link" size="small">关闭</Button>
                    <Button type="link" size="small">重启</Button>
                    <Dropdown.Button className="more" type="link" menu={{ items}}>更多</Dropdown.Button>
                </Space>
            )
        },
    ];

    const pagination = {
        onChange: (page, pageSize) => {
            setPageSize(pageSize)
            setPage(page - 1)
        },
        pageSize: pageSize,
        total: total
    }

    return (
        <Card>
            <Table columns={columns} dataSource={list} pagination={pagination}/>
        </Card>
    )
}